import React, {ReactNode} from 'react'
import Buttons from "../noBorderButton";
import styled from "@emotion/styled";
import './style.less'
import {Form} from "antd";

interface searchType {
    children: ReactNode,
    onSubmit: (value: object) => void,
    onReset?: () => void,
    initialValues?: any
}

export default function Index({children, onSubmit, onReset, initialValues}: searchType) {
    const [form] = Form.useForm();
    return (
        <Form
            form={form}
            initialValues={initialValues}
            onFinish={onSubmit}
            autoComplete="off"

        >
            <Container>
                {children}
                <Form.Item>
                    <Buttons type={'default'} color={'rgba(0, 0, 0, 0.85)'} border={'1px'} padding={'0.4rem 3rem'}
                             htmlType="submit"
                             className="login-form-button">搜索</Buttons>
                </Form.Item>
                <Form.Item>
                    <Buttons type={'default'} color={'rgba(0, 0, 0, 0.85)'} border={'1px'} padding={'0.4rem 3rem'}
                             onClick={() => {
                                 form.resetFields()
                                 onReset && onReset()
                             }}>重置</Buttons>
                </Form.Item>
            </Container>
        </Form>

    );
};

const Container = styled.div`
  margin-bottom: 2rem;
  box-shadow: 0 0.14286rem 0.85714rem 0 rgb(0 0 0 / 10%);
  background-color: #fff;
  display: flex;
  align-items: center;
  border-radius: 5px;
  padding: 1rem 2rem;
  flex-wrap: wrap;
`